<template>
  <div id="echarts_list">
    <div id="echarts1" style="width: 100%; height: 400px"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "echarts_list",
  props: {
    dataList: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },
  mounted() {
    this.drawLine(this.$props.dataList);
  },
  methods: {
    drawLine(dataList) {
      let myChart = echarts.init(document.getElementById("echarts1"));
      window.onresize = function () {
        myChart.resize();
      };
      myChart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        //功能
        // toolbox: {
        //   feature: {
        //     dataView: { show: true, readOnly: false },
        //     magicType: { show: true, type: ["line", "bar"] },
        //     restore: { show: true },
        //     saveAsImage: { show: true },
        //   },
        // },
        legend: {
          data: Object.values(dataList.cation),
        },
        xAxis: [
          {
            type: "category",
            data: dataList.dateList,
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "金额",
            min: 0,
            max: 1500000,
            interval: 300000,
            axisLabel: {
              formatter: "{value}",
            },
          },
          {
            type: "value",
            name: "数量",
            min: 0,
            max: dataList.maxNum,
            interval: dataList.intervalNum,
            axisLabel: {
              formatter: "{value}",
            },
          },
        ],
        series: [
          {
            name: dataList.cation.now,
            type: "bar",
            tooltip: {
              valueFormatter: function (value) {
                return value;
              },
            },
            data: dataList.priceList,
          },
          {
            name: dataList.cation.previous,
            type: "bar",
            tooltip: {
              valueFormatter: function (value) {
                return value;
              },
            },
            data: dataList.prePriceList,
          },

          {
            name: dataList.cation.nowNum,
            type: "line",
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value;
              },
            },
            data: dataList.qualityList,
          },
          {
            name: dataList.cation.previousNum,
            type: "line",
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value;
              },
            },
            data: dataList.preQualityList,
          },
        ],
      });
    },
  },
  computed: {
    echartList: function () {
      return this.$props.dataList;
    },
  },
  watch: {
    echartList: {
      // 数据变化时执行的逻辑代码
      handler(newName) {
        this.drawLine(newName);
      },
      // 开启深度监听
      deep: true,
    },
  },
};
</script>

<style>
</style>